<template>
  <div class="details">
    <div class="detailsbox">
      <div class="boxleft">
        <CardSlot :title="''" :isTitle="false">
          <div class="boxleft_box">
            <div class="boxleft_select">
              <el-select
                v-model="seleValue"
                placeholder=""
                size="default"
                @change="changeSele"
              >
                <el-option
                  v-for="item in seleOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <img
                src="@/assets/images/ico_search_red.png"
                alt=""
                @click.stop="changeTree"
              />
            </div>
            <el-input v-model="treeInput" placeholder="输入关键字进行过滤" />
            <el-tree
              ref="treeRef"
              :data="seleData"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
            />
          </div>
        </CardSlot>
      </div>
      <div class="boxright">
        <CardSlot :title="'配电室'" :slotShow="true">
          <div class="realtime">
            <div class="realtime_list">
              <div class="realtime_title">
                <div>电流（A）</div>
              </div>
              <div class="realtime_cont">
                <div class="realtime_item">
                  <div class="realtime_color" />
                  <div class="realtime_text">A相电流：308.86</div>
                </div>
                <div class="realtime_item">
                  <div class="realtime_color" />
                  <div class="realtime_text">B相电流：276.66</div>
                </div>
                <div class="realtime_item">
                  <div class="realtime_color" />
                  <div class="realtime_text">C相电流：303.64</div>
                </div>
                <div class="realtime_item">
                  <div class="realtime_color" />
                  <div class="realtime_text">中性线电流：31.303</div>
                </div>
                <div class="realtime_item">
                  <div class="realtime_color" />
                  <div class="realtime_text">相平均电流：296.39</div>
                </div>
              </div>
            </div>
            <div class="realtime_list">
              <div class="realtime_title">
                <div>相电压（V）</div>
              </div>
              <div class="realtime_cont">
                <div class="realtime_item">
                  <div class="realtime_color" />
                  <div class="realtime_text">A相电压：229.10</div>
                </div>
                <div class="realtime_item">
                  <div class="realtime_color" />
                  <div class="realtime_text">B相电压：229.89</div>
                </div>
                <div class="realtime_item">
                  <div class="realtime_color" />
                  <div class="realtime_text">C相电压：229.89</div>
                </div>
                <div class="realtime_item">
                  <div class="realtime_color" />
                  <div class="realtime_text">相电压平均值：229.89</div>
                </div>
              </div>
            </div>
            <div class="realtime_list">
              <div class="realtime_title">
                <div>线电压（V）</div>
              </div>
              <div class="realtime_cont">
                <div class="realtime_item">
                  <div class="realtime_color" />
                  <div class="realtime_text">A-B线电压：398.29</div>
                </div>
                <div class="realtime_item">
                  <div class="realtime_color" />
                  <div class="realtime_text">B-C线电压：398.10</div>
                </div>
                <div class="realtime_item">
                  <div class="realtime_color" />
                  <div class="realtime_text">C-A线电压：398.00</div>
                </div>
                <div class="realtime_item">
                  <div class="realtime_color" />
                  <div class="realtime_text">线电压平均值：398.10</div>
                </div>
              </div>
            </div>
            <div class="realtime_list">
              <div class="realtime_title">
                <div>有功功率（KW）</div>
              </div>
              <div class="realtime_cont">
                <div class="realtime_item">
                  <div class="realtime_color" />
                  <div class="realtime_text">A相有功功率：71.03</div>
                </div>
                <div class="realtime_item">
                  <div class="realtime_color" />
                  <div class="realtime_text">B相有功功率：63.65</div>
                </div>
                <div class="realtime_item">
                  <div class="realtime_color" />
                  <div class="realtime_text">C相有功功率：70.35</div>
                </div>
                <div class="realtime_item">
                  <div class="realtime_color" />
                  <div class="realtime_text">总有功功率：205.04</div>
                </div>
              </div>
            </div>
            <div class="realtime_list">
              <div class="realtime_title">
                <div>无功功率（KW）</div>
              </div>
              <div class="realtime_cont">
                <div class="realtime_item">
                  <div class="realtime_color" />
                  <div class="realtime_text">A相无功功率：13.53</div>
                </div>
                <div class="realtime_item">
                  <div class="realtime_color" />
                  <div class="realtime_text">B相无功功率：13.27</div>
                </div>
                <div class="realtime_item">
                  <div class="realtime_color" />
                  <div class="realtime_text">C相无功功率：9.51</div>
                </div>
                <div class="realtime_item">
                  <div class="realtime_color" />
                  <div class="realtime_text">总无功功率：36.32</div>
                </div>
              </div>
            </div>
            <div class="realtime_list">
              <div class="realtime_title">
                <div>其他</div>
              </div>
              <div class="realtime_cont">
                <div class="realtime_item">
                  <div class="realtime_color" />
                  <div class="realtime_text">总视在电能：3751642.00</div>
                </div>
                <div class="realtime_item">
                  <div class="realtime_color" />
                  <div class="realtime_text">视在电能翻转：0.00</div>
                </div>
              </div>
            </div>
          </div>
          <template #header>
            <el-select
              v-model="infoValue"
              placeholder="选择显示数据"
              size="small"
              style="width: 130px"
              @change="changeInfo"
            >
              <el-option
                v-for="item in infoOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </CardSlot>

        <CardSlot :title="'数据信息'">
          <div id="energyinfo" class="energyinfo" />
        </CardSlot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, onUnmounted } from "vue";
import { ElSelect, ElOption, ElInput, ElTree } from "element-plus";
import * as echarts from "echarts";
import CardSlot from "@/components/cardslot/index.vue";

let threedom;

let infoChart;

let seleValue = ref("0");
let seleOptions = [
  { value: "0", label: "南制冷" },
  { value: "1", label: "北制冷" }
];

const changeSele = v => {
  seleValue.value = v;
};

let treeInput = ref("");
let treeRef = ref();

// 树结构
const data = [
  {
    id: 1,
    label: "南制冷",
    children: [
      {
        id: 3,
        label: "南制冷1"
      },
      {
        id: 4,
        label: "南制冷2"
      },
      {
        id: 5,
        label: "南制冷3"
      }
    ]
  },
  {
    id: 2,
    label: "北制冷",
    children: [
      {
        id: 6,
        label: "北制冷1"
      },
      {
        id: 7,
        label: "北制冷2"
      },
      {
        id: 8,
        label: "北制冷3"
      }
    ]
  }
];
const defaultProps = {
  children: "children",
  label: "label"
};

let seleData = ref([data[seleValue.value]]);

const changeTree = () => {
  seleData.value = [data[seleValue.value]];
  treeInput.value = "";
};

const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.includes(value);
};

// 实时数据
let infoValue = ref("S1A1-1");
const infoOptions = [
  { value: "S1A1-1", label: "S1A1-1" },
  { value: "S1A1-2", label: "S1A1-2" },
  { value: "S1A1-3", label: "S1A1-3" }
];
const changeInfo = value => {
  infoValue.value = value;
};

// 能源信息
const initInfo = () => {
  if (infoChart != null && infoChart != "" && infoChart != undefined) {
    infoChart.dispose();
  }
  infoChart = echarts.init(document.getElementById("energyinfo"));
  infoChart.clear();
  let option = {
    tooltip: {
      trigger: "axis"
    },
    legend: {
      itemWidth: 11,
      itemHeight: 3
      // right: '10px',
    },
    grid: {
      top: "25%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      data: ["1日9时", "1日10时", "1日11时", "1日12时", "1日13时"],
      nameTextStyle: {
        color: "#333"
      },
      axisLine: {
        lineStyle: {
          color: "#ccc"
        }
      },
      splitLine: {
        lineStyle: {
          color: "#ccc"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: "#333"
      }
    },
    yAxis: {
      type: "value",
      name: "kw"
    },
    color: ["#287CE7", "#30C6DC", "#27B4FF", "#FFB63F", "#FF751D"],
    series: [
      {
        name: "A相电流",
        type: "line",
        data: [20, 23, 23, 25, 21, 26],
        smooth: false,
        itemStyle: {
          opacity: 0
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(40, 124, 231, 0.8)"
            },
            {
              offset: 0.9,
              color: "rgba(40, 124, 231, 0)"
            }
          ])
        }
      },
      {
        name: "B相电流",
        type: "line",
        data: [26, 21, 23, 25, 21, 26],
        smooth: false,
        itemStyle: {
          opacity: 0
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(48, 198, 220, 0.8)"
            },
            {
              offset: 0.9,
              color: "rgba(48, 198, 220, 0)"
            }
          ])
        }
      },
      {
        name: "C相电流",
        type: "line",
        data: [22, 24, 23, 25, 15, 17],
        smooth: false,
        itemStyle: {
          opacity: 0
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(39, 180, 255, 0.8)"
            },
            {
              offset: 0.9,
              color: "rgba(39, 180, 255, 0)"
            }
          ])
        }
      },
      {
        name: "中相电流",
        type: "line",
        data: [25, 23, 20, 25, 21, 16],
        smooth: false,
        itemStyle: {
          opacity: 0
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(255, 182, 63, 0.8)"
            },
            {
              offset: 0.9,
              color: "rgba(255, 182, 63, 0)"
            }
          ])
        }
      },
      {
        name: "三相电流平均",
        type: "line",
        data: [20, 23, 20, 25, 21, 19],
        smooth: false,
        itemStyle: {
          opacity: 0
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(255, 117, 29, 0.8)"
            },
            {
              offset: 0.9,
              color: "rgba(255, 117, 29, 0)"
            }
          ])
        }
      }
    ]
  };

  option && infoChart.setOption(option);
};

watch(
  treeInput,
  val => {
    treeRef.value.filter(val);
  },
  { deep: true }
);

const resizeCharts = () => {
  infoChart?.resize();
};

onMounted(() => {
  threedom = document.getElementById("ThreeContainer");
  threedom.style.display = "none";

  initInfo();
  window.addEventListener("resize", resizeCharts, false);
});

onUnmounted(() => {
  threedom.style.display = "block";

  infoChart?.dispose();

  window.removeEventListener("resize", resizeCharts, false);
});
</script>

<style scoped lang="scss">
// .details {
//   width: 100%;
//   height: 100%;
//   background-image: url("@/assets/images/img_otherbg.png");
//   background-repeat: no-repeat;
//   background-size: 100% 100%;
// }

.detailsbox {
  position: fixed;
  // top: 175px;
  top: 145px;
  left: 0;
  display: flex;
  width: 100%;
  // height: calc(100vh - 175px);
  height: calc(100vh - 145px);
  padding: 0 24px;

  .boxleft {
    display: flex;
    flex: 1;
    flex-flow: column nowrap;
    flex-shrink: 1;
    align-items: center;
    justify-content: space-between;
    padding-right: 8px;

    .boxleft_box {
      width: 100%;
      height: 100%;
      background-color: #fdfefe;

      .boxleft_select {
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        img {
          width: 32px;
          height: 32px;
          margin-left: 5px;
          cursor: pointer;
        }
      }

      .el-input {
        margin-bottom: 12px;
      }
    }
  }

  .boxright {
    display: flex;
    flex: 3.5;
    flex-flow: column nowrap;
    flex-shrink: 3.5;
    align-items: center;
    justify-content: space-between;
    padding-left: 8px;

    .cardslot:nth-child(1) {
      flex: 1.5;
    }

    .cardslot:nth-child(2) {
      flex: 2;
    }

    .realtime {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      padding: 0 6px;

      .realtime_list {
        flex: 1;
        height: 90%;
        margin-right: 16px;
        border-radius: 5px;
        box-shadow: 0 4px 8px 0 rgb(0 1 1 / 10%);
        overflow-y: auto;

        &:last-child {
          margin-right: 0;
        }

        .realtime_title {
          text-align: center;
          background: #1764d5;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;

          div {
            padding: 9px 0;
            font-size: 18px;
            line-height: 18px;
            color: #fff;
          }
        }

        .realtime_cont {
          padding: 5px 16px;

          .realtime_item {
            display: flex;
            align-items: center;
            // margin-bottom: 15px;
            padding: 10px 0;
            border-bottom: 1px solid #eee;

            .realtime_color {
              width: 11px;
              height: 3px;
              margin-right: 10px;
              background-color: #287ce7;
            }

            .realtime_text {
              font-size: 14px;
              font-weight: bold;
              line-height: 14px;
              color: #333;
            }

            &:nth-child(2) {
              .realtime_color {
                background-color: #30c6dc;
              }
            }

            &:nth-child(3) {
              .realtime_color {
                background-color: #27b4ff;
              }
            }

            &:nth-child(4) {
              .realtime_color {
                background-color: #ffb63f;
              }
            }

            &:nth-child(5) {
              .realtime_color {
                background-color: #ff751d;
              }
            }
          }
        }
      }
    }

    .energyinfo {
      width: 100%;
      height: 100%;
    }
  }

  .cardslot {
    width: 100%;
    height: 100%;
  }
}
</style>
